<template>
  <div class="line-add-menu" @click="btnStopPropagation($event)">
<!--     -->
    <a-dropdown
        :trigger="['click']"
        :overlay-style="{width: '120px'}"
        :visible="menuStatus"
    >
      <!--触发图标 -->
      <span class="blank-holder"></span>
      <a-menu slot="overlay">
        <a-sub-menu
          v-for="(menu, index) in menus"
          :key="'menu' + index"
          :title="menu.name"
        >
          <a-menu-item
            v-for="(operator, subIndex) in menu.items"
            :key=" 'sub' + subIndex"
            @click="titleClick(operator)"
          >{{operator.name}}
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'


@Component({
  components: {}
})
export default class LineAddMenu extends Vue {
  public menus: Array<any> = []
  @Prop({type: Number, default: 0}) nodeId!: number
  @Prop({type: Object, default: () => { return {} }}) nodePosition!: object
  @Prop({type: Boolean, default: false}) lineAddNodeMenuStatus!: boolean

 public get menuStatus() {
    return this.lineAddNodeMenuStatus
 }

  public mounted() {
    this.menus = DataViewStore.projectOperator
  }

  titleClick(operator: any) {
    this.$emit('line-add-node', operator)
  }

  public btnStopPropagation($event: MouseEvent) {
    $event.stopPropagation()
  }

}
</script>

<style scoped lang="less">

.line-add-menu {
  cursor: pointer;
  height: 14px;
  line-height: 14px;
  position: absolute;
  width: 14px;
  z-index: 31;

  .blank-holder {
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    width: 14px;
  }
}
</style>
